<template>
	<view>
		<view v-for="(item,index) in poiList" v-bind:key="index" class="item">
			<view class="uni_flex_row_between" style="width: 100%;">
				<text class="uni_16px uni_color_333 uni_ellipsis" style="max-width: calc(70vw);">{{item.name}}</text>
				<text class="uni_14px select_text uni_weight_600" style="padding: 2rpx 4rpx;letter-spacing: 2rpx;" @click="selectedPoi(item)">使用</text>
			</view>
			<text class="uni_14px uni_color_999 mt8">{{item.address}}</text>
		</view>
	</view>
</template>

<script>
	import { provide } from "vue";
   import dataBase from '@/common/dataBase.js';
	import {BASE_IP} from '@/common/http/url.js'
	export default {
		data() {
			return {
				poiList:[],
				city:'',
				province:'',
			}
		},
		onLoad(options) {
			this.getWeatherAndGeographicInfo();
			uni.setNavigationBarTitle({
				title:"水印设置"
			})
		},
		methods: {
			/**
			 * 获取天气和地理位置信息
			 */
			getWeatherAndGeographicInfo() {
				uni.getLocation({
					altitude: true,
					success: (res) => {
						let lat = res.latitude
						let log = res.longitude
						let url = BASE_IP + "pc/map/infos/" + lat + "/" + log
						let user = uni.getStorageSync("user")
						uni.request({
							header: {
								"Authorization": user.token,
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							url: url,
							method: "GET",
							success: (res) => {
								if (res.data.code == 1) {
									let data = JSON.parse(res.data.data)
									console.log("获取地理位置信息：", data)
									let data_geographicInfo = JSON.parse(data.geographicInfo)
									console.log("data_geographicInfo：",data_geographicInfo)
									this.province = data_geographicInfo.regeocode.addressComponent.province
									this.city =data_geographicInfo.regeocode.addressComponent.province.city
									this.poiList =data_geographicInfo.regeocode.pois
								}
							}
						})
					}
				})
			},
			// 选定使用poi
			selectedPoi(poi){
				poi.name = (this.province||'') + (this.city||'') + '·' + poi.name;
				uni.$emit("receivePoi",poi);
				uni.navigateBack({
					delta:1
				});
			},
			getLocation(){
				dataBase.queryLocation().then(res=>{
					this.province = res.province;
					this.city = res.city;
					this.poiList = res.pois;
				});
			},
		}
	}
</script>

<style>
.item{
	width: calc(100vw - 24rpx);
	padding: 22rpx 12rpx;
	border-bottom: 1rpx solid #DDDDDD;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.select_text{
	color: #E00300;
}
</style>
